<template>
  <div id="app">
    <meta name="referrer" content="no-referrer" />
    <router-view />
    <el-dialog
      title="正在更新版本,请稍后 ···"
      :visible.sync="dialogVisible"
      width="60%"
      :close-on-click-modal="closeOnClickModal"
      :close-on-press-escape="closeOnPressEscape"
      :show-close="showClose"
      center
    >
      <div
        style="width: 100%; height: 5vh; line-height: 5vh; text-align: center"
      >
        <el-progress
          status="success"
          :text-inside="true"
          :stroke-width="20"
          :percentage="percentage"
          :width="strokeWidth"
          :show-text="true"
        ></el-progress>
      </div>
    </el-dialog>
  </div>
</template>

<script>
const { ipcRenderer } = require("electron");

export default {
  name: "app",
  data() {
    return {
      dialogVisible: false,
      closeOnClickModal: false,
      closeOnPressEscape: false,
      showClose: false,
      percentage: 0,
      strokeWidth: 200,
      isRouterAlive: true,
      interval:'',//定时器方法
    };
  },
  mounted() {
    this.WebSocket();
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => (this.isRouterAlive = true));
    },
    // 更新事件
    update() {
      let self = this;
      //接收主进程版本更新消息
      ipcRenderer.on("message", (event, arg) => {
        alert(JSON.stringify(arg));
        if ("update-available" == arg.cmd) {
          //显示升级对话框
          self.dialogVisible = true;
        } else if ("download-progress" == arg.cmd) {
          // console.log(arg.message.percent);
          let percent = Math.round(parseFloat(arg.message.percent));
          self.percentage = percent;
        } else if ("error" == arg.cmd) {
          self.dialogVisible = false;
          self.$message(arg);
        } else if ("update-not-available" == arg.cmd) {
          // self.$message(arg);
        } else if ("update-downloaded" == arg.cmd) {
          this.$confirm("新版本下载完成, 是否升级?", "提示", {
            confirmButtonText: "升级",
            cancelButtonText: "取消",
            closeOnClickModal:false,
            type: "warning",
          })
            .then(() => {
              ipcRenderer.send("updateNow"); //执行安装更新包
            })
            .catch(() => {
              self.dialogVisible = false;
            });
        }
      });
      //开始检测新版本
      let timeOut = window.setTimeout(() => {
        ipcRenderer.send("checkForUpdate");
        // console.log('开始检测更新触发')
      }, 500);
      clearTimeout;
    },
    // 及时请求
    WebSocket() {
      var ws = new WebSocket("ws://localhost:3000/");

      // Web Socket 已连接上，使用 send() 方法发送数据
      ws.onopen =  ()=> {
        var i = 0
        // 这里用一个延时器模拟事件
      this.interval  =  setInterval( ()=> {
          ws.send('token');
        }, 2000);
      };
      // 这里接受服务器端发过来的消息
      ws.onmessage =  (e)=> {
        console.log(e.data);
        if (e.data == "true") {
            ws.close();
            clearInterval(this.interval);
            this.$confirm("检查出新版本发布,是否下载最新版本?", "提示", {
            confirmButtonText: "是",
            cancelButtonText: "否",
            closeOnClickModal:false,
            type: "warning",
          })
            .then(() => {
                this.update()
            })
            .catch(() => {
             
            });
       
        }
      };
    },
  },
  destroyed() {
    window.clearInterval(interval);
    window.clearInterval(timeOut);
  },
};
</script>

<style>
/* CSS */

#app {
  height: 100%;
  overflow: hidden;
}
#app > div {
  overflow: hidden;
}
.tableList {
  widows: 150px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.el-tooltip__popper {
  font-size: 14px;
  max-width: 300px !important;
  text-align: justify;
  text-justify: newspaper;
  word-break: break-all;
  line-height: 20px;
}
</style>
